<template>
    <view class="container">
        <view class="container-badge" v-show="isLogin">
            <wd-badge custom-class="badge" modelValue="22" bg-color="#d3e9f8" size="mid">
                <wd-icon name="notification-filled" size="62rpx"></wd-icon>
            </wd-badge>
        </view>
        <view class="container-box">
            <wd-img :width="150" :height="150" :src="imageUrl" round />
            <wd-text :text="isLogin ? 'dsadasdsadsadada' : '你还未添加任何设备'" color="#000"
                class="container-text"></wd-text>
            <wd-button v-show="!isLogin" type="primary" size="large" round custom-class="custom-btn">添加设备</wd-button>
        </view>
    </view>
</template>

<script setup>
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const isLogin = userStore.isLogin();
const imageUrl = uni.lan.getImage('test');


</script>

<style lang="scss" scoped>
:deep(.custom-btn) {
    .custom-shadow {
     background-color: aqua;
    }
}
.container {
    &-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 30rpx;
        margin-bottom: 20rpx;
    }

    &-badge {
        text-align: right;

    }
}
</style>
